{% extends "base.html" %}

{% block title %}Home{% endblock %}
{% block content %}

{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
		{% for category, msg in messages %}
			<div class="alert alert-{{ category }} mt-2">{{ msg }}</div>
		{% endfor %}
	{% endif %}
{% endwith %}



{% if session['role'] == "admin" %}
<h1 class="text-center mt-3 mb-1">Admin Dashboard</h1>
<p class="text-center">You can manage all assets and users.</p>
{% elif session['role'] == "manager" %}
<h1 class="text-center mt-3 mb-1">Manager Dashboard</h1>
<p class="text-center">You can view and assign assets to employees.</p>
{% else %}
<h1 class="text-center mt-3 mb-1">User Dashboard</h1>
<p class="text-center">You can view your assigned assets only.</p>
{% endif %}




<!-- Dashboard Overview -->
<div class="dashboard container-fluid py-4">

  <div class="row justify-content-center">

    <!-- Assets by Status -->
    <div class="col-md-5 col-lg-4 mb-4">
      <div class="dashboard-card p-4 shadow-sm">
        <h5 class="text-center mb-3">Assets by Status</h5>
        <canvas id="statusChart" height="300"></canvas>
      </div>
    </div>

    <!-- Assets by Vendor -->
    <div class="col-md-5 col-lg-4 mb-4">
      <div class="dashboard-card p-4 shadow-sm">
        <h5 class="text-center mb-3">Assets by Vendor</h5>
        <canvas id="vendorChart" height="250"></canvas>
      </div>
    </div>

   <!-- Assets by Department -->
    <div class="col-md-5 col-lg-4 mb-4">
      <div class="dashboard-card p-4 shadow-sm">
        <h5 class="text-center mb-3">Assets by Type</h5>
        <canvas id="typeChart" height="250"></canvas>
      </div>
    </div>

  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>



<!-- Dashboard Styles -->
<style>
  body {
    background-color: #f7f9fb;
  }

  .dashboard-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  h1 {
    font-weight: 600;
    color: #1e3a8a;
  }

  h5 {
    font-weight: 500;
    color: #374151;
  }
</style>



<script>
async function loadStatusChart() {
  const response = await fetch("/chart-data/assets-by-status");
  const data = await response.json();

  const labels = data.map(item => item.status);
  const values = data.map(item => item.count);

  const ctx = document.getElementById('statusChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Number of Assets',
        data: values,
        backgroundColor: 'rgba(54,235,90,0.6)',
        borderColor: 'rgba(54,235,90,0.75)',
        borderWidth: 1
      }]
    },
    options: {
      scales: { y: { beginAtZero: true } }
    }
  });
}

async function loadVendorChart() {
  const response = await fetch("/chart-data/assets-by-vendor");
  const data = await response.json();

  const labels = data.map(item => item.vendor);
  const values = data.map(item => item.count);

  const ctx = document.getElementById('vendorChart');
  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        label: 'Assets per Vendor',
        data: values,
        backgroundColor: [
          'rgba(245, 99, 255, 0.73)',
          'rgba(54, 162, 235, 0.54)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
          'rgba(255, 159, 64, 0.6)',
          'rgba(99, 255, 132, 0.6)'
        ],
        borderColor: 'rgba(255,255,255,1)',
        borderWidth: 3
      }]
    },
    options: {
        cutout: '60%',
      plugins: {
        legend: { position: 'top' },
        title: {
          display: true,
          text: 'Assets by Vendor'
        }
      }
    }
  });
}



async function loadTypeChart() {
  const response = await fetch("/chart-data/assets-by-type");
  const data = await response.json();

  if (!data.length) {
    document.getElementById('typeChart').replaceWith('No asset type data available');
    return;
  }

  const labels = data.map(item => item.type);
  const values = data.map(item => Number(item.count));

  const ctx = document.getElementById('typeChart');
  new Chart(ctx, {
    type: 'polarArea',
    data: {
      labels: labels,
      datasets: [{
        data: values,
        backgroundColor: [
          'rgba(59,130,246,0.7)',
          'rgba(16,185,129,0.7)',
          'rgba(239,68,68,0.7)',
          'rgba(234,179,8,0.7)',
          'rgba(147,51,234,0.7)'
        ],
        borderColor: '#fff',
        borderWidth: 2
      }]
    },
    options: {
      plugins: {
        legend: { position: 'bottom' },
        title: {
          display: true,
          text: 'Assets by Type'
        }
      }
    }
  });
}



loadStatusChart();
loadVendorChart();
loadTypeChart();
</script>



{% if session['role'] == 'admin' or session['role'] == 'manager' or session['role'] == 'user' %}
<!--<h2>Logged in as: {{ full_name }}</h2>-->

{% if session['role'] == 'manager' or session['role'] == 'admin' %}
<div class="row mb-4">
  <div class="col-md-6">
    <div class="card text-white bg-primary">
      <div class="card-body">
        <h5 class="card-title">Total Cost of Assets</h5>
        <p class="card-text">${{ "{:,.2f}".format(total_value) }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card text-white bg-success">
      <div class="card-body">
        <h5 class="card-title">Average Asset Cost</h5>
        <p class="card-text">${{ "{:,.2f}".format(average_value) }}</p>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="container mt-4">
	<h3>Your Assigned Assets</h3>

	{% if assets %}
		<ul class="list-group mt-3">
			{% for asset in assets %}
			<li class="list-group-item d-flex justify-content-between align-items-start">
				<div class="ms-2 me-auto">
					<div class="fw-bold">{{ asset.name }}</div>
					<span class="text-muted">
						Tag: {{ asset.asset_tag }}<br>
						Status: {{ asset.status.status_name if asset.status else "—" }}<br>
						Location: {{ asset.location.name if asset.location else "—" }}
					</span>
				</div>
				<span class="badge bg-primary rounded-pill">
					{{ asset.purchase_date.strftime("%Y-%m-%d") if asset.purchase_date else "—" }}
				</span>
			</li>
			{% endfor %}
		</ul>
	{% else %}
		<div class="alert alert-info mt-3">No assets assigned to you.</div>
	{% endif %}
</div>
{% endif %}

<!-- Export Entire DB Button -->
{% if session['role'] == 'admin' %}
<a href="/export" class="btn btn-primary btn-sm">
    <i class="bi bi-download"></i> Export Database
</a>
{% endif %}

{% endblock %}